import React from "react";
//引入store,关联测试
import store from '../../store/store'

//引入actions
import {incrementAction,decrementAction} from '../../store/actions/countAction'
//引入成功之后,下面的动作均可替换掉了,给data传个1

export default function Count() {

    const incrementHandle = () => {
        store.dispatch(incrementAction(1))
    }
    const decrementHandle = () => {
        store.dispatch(decrementAction(1))
    }
    const ifOddDecrementHandle = () => {
        if (count % 2 !== 0) {
            store.dispatch(incrementAction(1))
          }
    }
    const waitDecrementHandle = () => {
        setTimeout(() => {
            store.dispatch(incrementAction(1))
          }, 1000)
    }
    const { count } = store.getState()
    return (
        <div>
            <h1>我是Count组件,我的值是{count}</h1>
            <div>
                <button onClick={incrementHandle} >累加</button>
                <button onClick={decrementHandle}>累减</button>
                <button onClick={ifOddDecrementHandle}>如果是奇数再加1</button>
                <button onClick={waitDecrementHandle}>等2s再加1</button>
            </div>
        </div>
    )
}


//1.这里有一个Count组件,我们需要点击对应的button按钮改变初始值,并共享给Movie组件
//首先给每一个按钮绑定点击事件,然后定义事件函数.

//2.组件准备好之后我们就需要用到store了
// 2.1在src下创建store文件夹-创建store.js文件,这个就是我们的仓库了,数据都从这里共享,
// 2.2下载store 的包

// //在虚拟dom中获取store中的值方法是{store.getState()},得到一个字符串,我们需要解构出来
//同样Movie中也需要引入

//3.现在关联已经成功,接下来需要执行具体的指令了.
// action包含有两个属性
        //type :类型的意思.表示指令的具体类型(是+1 还是-1)
        //data :表示指令执行的具体内容.(加几?)